<template>
<div>
    <ylheader :title="'发现圈子'"></ylheader>
    <!--<div class="all-hot-title" >精选推荐</div>-->
    <div class="" ref="discoveryWrapper" style="background-color: #fff">
      <div class="loadmore-ul">
        <div class="shuoshuo-new" v-if="!listnodata" style="background:#ffffff;">
          <span class="yl-2kong nosvg">
            <span class="path1">
              <span class="path2">
                <span class="path3">
                  <span class="path4">
                    <span class="path5">
                      <span class="path6">
                        <span class="path7">
                          <span class="path8">
                            <span class="path9"></span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
          <span class="no-text">还没有相关内容哦~</span>
        </div>

        <ul class="dicoveryul">
            <li  v-for="(items,index) in list" :key="index" @click="choose(items,index)">
                <div class="img-with-text" >
                    <img  v-lazy="items.pic" class="imgtextback"/>
                  <p  class="topiclisttitle">{{items.name}}</p>
                  <div class="addfollow" v-if="ids.indexOf(items) != -1" style="background-color: #FB685B"><img src="../../../src/assets/tik.png"></div>

                  <div class="addfollow" v-else><img src="~img/add.png"></div>
                </div>
            </li>
        </ul>
        <p style="height:0.33rem;"></p>
      </div>
    </div>
  <div class="submit">
    <p style="color:#999999;font-size: .24rem;line-height: .8rem">至少选择2个圈子</p>
    <p class="btn" @click="querycirclejoin">选好了</p>
  </div>
    <indexnavigation></indexnavigation>
</div>
</template>
<script>
import ylheader from "src/components/yl-header.vue";
import indexnavigation from "src/components/index/indexnavigation.vue";
import api from "src/api/index";
export default {
  name:"discoveryClub",
  data(){
    return {
       list:[],
       page: 1,
       totalPage: 0,
       is_r:false,
       listnodata:false,
      tikTrue:[false,false,false,false],
      ids:[],
    }
  },
  components:{
    ylheader,
    api,
    indexnavigation
  },
  created(){
      this.queryDiscovery()
  },
  watch:{
    tikTrue:{
      handler:function (val,oldval) {
        console.log(val,oldval)
      },
      deep:true
    }
  },
  methods:{
    choose(item){
      let indexitem = this.ids.indexOf(item);
      if(indexitem == -1){
        this.ids.push(item);
      }else{
        this.ids.splice(indexitem,1)
      }

    },
    querycirclejoin(){
      let data = {
        ids:this.ids.map((id)=>id.id).join(',')
      }
      console.log(data.ids)
      if(this.ids.length >1 ){
        api.querycirclejoin(data).then(res=>{
         if(res.success){
           this.$router.push('discovery')
         }else{
           this.$toast("操作失败");
         }
       })
      }else{
        this.$toast("至少选择2个圈子");
      }

    },
    queryDiscovery(){
         let p = new Promise((resolve, reject) => {
            if ("discovery2detail" == localStorage.turnCount) {
              let discoveryObj = JSON.parse(localStorage.discoveryStorage);
              this.list = discoveryObj.list;


              this.page = discoveryObj.page;
              this.totalPage = discoveryObj.totalPage;
              if(this.page<this.totalPage){
                this.is_r=false;
              }
              resolve(true);
            }else{
              const data = {
                  page: this.page,
                  limit: 500,
              }
              api.queryDiscoveryUNjoin(data).then(res => {
                console.log(res);
                this.listnodata = true;
                  if(res.success){
                       // this.totalPage = res.data.totalPage
                      this.list = this.is_r
                     ? [...this.list, ...res.data]
                     : res.data;
                  /*   if(this.page<res.data.totalPage){
                         this.is_r=false;
                     }
                  /!*   if(this.list.length==0){
                         this.listnodata = true;
                     } else{
                       this.listnodata = false;
                     }*!/
                     if(this.myscroll){
                       this.$nextTick(() => {
                         this.myscroll.refresh();
                       });
                     }
                     let discoveryObj = JSON.stringify({
                       list:this.list,
                       page: this.page,
                       totalPage: this.totalPage,
                     });
                     localStorage.discoveryStorage = discoveryObj;*/

                  }
              })

            }

            resolve("获取发现列表....");
         });
         return p;
    },
    gotodetail(data){
      localStorage.turnCount = "discovery2detail";
      this.getTransformState();
        this.$router.push({
          path:"/topicdetail",
          query:{topicId:data}
        })
    },
    //获取跳转前的位置
    getTransformState() {
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if (loadmore.length > 0) {
        localStorage.turnBackDiscovery = loadmore[0].style.transform;
      }
    }
  }
}
</script>
<style scoped>
.loadmore-ul{
  padding-bottom: 2rem;
}
.img-with-text{
    position: relative;
    margin-bottom: 0.28rem;
    width: 2.08rem;
    height: 2.74rem;
    border-radius: 0.1rem;
}
.imgtextback{
  width: 1.04rem;
  height: 1.04rem;
  border-radius: 50%;
  margin-top: .24rem;
  margin-left: .52rem;
}
.img-with-text p{
  margin: 0;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  display: block;
}
.topiclisttitle{
  font-size: 0.28rem;
  color: #333;
  text-align: center;
  line-height: .4rem;
  font-weight: 500;
  margin-top: .1rem !important;
  padding: 0.07rem 0.2rem 0.1rem 0.2rem;
  font-family: PingFangSC Medium;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.topiclistfollownumber{
  font-size: 0.24rem;
  color: #999999;
}
 .hottopictitle {
  font-size: 0.24rem;
  color: #333;
  width: 1.88rem;
  height: 0.44rem;
  line-height: 0.44rem;
  position: absolute;
  top: 0.3rem;
}
.indexhottuati{
  display: flex;
  align-items: center;
  justify-content: center
}
.dicoveryul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    align-content: flex-start;
}
.dicoveryul li{
    margin: 0.3rem;
  margin-right: 0;
  margin-bottom: 0;
    background-color: #FAFAFA;
}
.follownumbase{
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0.2rem;
    padding:0 0.2rem;
}
.follownumicon{
    font-size: 0.26rem;
    color: #999999;
}
.all-hot-title {
  background: #f5f5f5;
  height: 0.8rem;
  padding:0.02rem 0 0 0.3rem;
  font-size: 0.3rem;
  display: flex;
  align-items: center;
  font-family: "PingFangSC Regular";
  color: #3a3a3a;
}
.discoverylabel{
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  color: #ffffff;
  font-size: 0.22rem;
  border-radius:0.22rem;
}
.discoverylabel div{
  padding: 0.02rem 0.15rem;
}
  .addfollow{
    width:1.36rem;
    height:.36rem;
    margin: .3rem auto;
    background-color: rgba(220,220,220,1);
    color:#fff;
    font-weight: bolder;
    text-align: center;
  }
  .submit{
    position: fixed;
    bottom:1.4rem;
    left:0;
    width:100%;
    height:1.4rem;
    text-align: center;
  }
.btn{
  width:6.9rem;
  height:.8rem;
  line-height: .8rem;
  font-size: .36rem;
  color:#fff;
  background-color: #FB685B;
  margin: 0 auto;
  border-radius: .4rem;
}
</style>

